<!DOCTYPE html>
<html>
  <head>
    <title>通过JavaScript来创建EasyUI布局</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
     <!-- 引入JQuery -->
      <script type="text/javascript" src="jquery-easyui-1.6.6/jquery.min.js"></script>
      <!-- 引入EasyUI -->
      <script type="text/javascript" src="jquery-easyui-1.6.6/jquery.easyui.min.js"></script>
      <!-- 引入EasyUI的中文国际化js，让EasyUI支持中文 -->
      <script type="text/javascript" src="jquery-easyui-1.6.6/locale/easyui-lang-zh_CN.js"></script>
      <!-- 引入EasyUI的样式文件-->
      <link rel="stylesheet" href="jquery-easyui-1.6.6/themes/default/easyui.css" type="text/css"/>
      <!-- 引入EasyUI的图标样式文件-->
      <link rel="stylesheet" href="jquery-easyui-1.6.6/themes/icon.css" type="text/css"/>
      <script type="text/javascript">
          $(function(){
              //画面加载完成之后就调用layout()方法将body变成easy的layout
              $('#easyUILayoutBody').layout(); 
           
          });
      </script>
  </head>
  <!--给body指定class属性指定easy的easyui-layout样式，这样就可以 使用body创建easyui的layout -->
  <body id="easyUILayoutBody" >
    <div data-options="region:'north',title:''" style="height:55px">
    	<h1>谷元科技</h1>
    </div>
    <!-- 布局中如果不需要west这个面板，那么可以删掉这个div -->  
    <div data-options="region:'west',title:'导航菜单'" style="width:100px;">
       <div id="tree-box" class="easyui-accordion" data-options="fit:true,border:false">
			<a class="menu-item" href="/pump//hisList">风机</a>
			<a class="menu-item" href="#">水泵</a>
			<a class="menu-item" href="#">测试1</a>
		</div>
    </div>
    <div data-options="region:'center',title:''">
	        <table class="easyui-datagrid" data-options="url:'datagrid_data1.json',method:'get',border:false,singleSelect:true,fit:true,fitColumns:true">
				<thead>
					<tr>
						<th data-options="field:'itemid'" width="80">Item ID</th>
						<th data-options="field:'productid'" width="100">Product ID</th>
						<th data-options="field:'listprice',align:'right'" width="80">List Price</th>
						<th data-options="field:'unitcost',align:'right'" width="80">Unit Cost</th>
						<th data-options="field:'attr1'" width="150">Attribute</th>
						<th data-options="field:'status',align:'center'" width="60">Status</th>
					</tr>
				</thead>
			</table>
    </div>
    <div data-options="region:'south',title:'',split:true" style="height:20px;">
    	<div class="panel-header" style="border: none; text-align: center;" >CopyRight &copy; 2018-2020 版权所有. &nbsp;&nbsp;官方网址:http://www.guyuandq.com/  &nbsp;&nbsp;沪ICP备16052723号 工信部</div>
    </div> 
  </body>  
</html>